/* ======================================================
    <!-- Cascading DropDown List -->
/* ====================================================== */
@import '@poemkit/components/_utils/styles/_variable-and-mixin.scss';

.poemkit-cascading-dropdown-list {
    display: flex;
    align-items: center;
	position: relative;
	z-index: 1;

	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.poemkit-cascading-dropdown-list__result {
		font-style: normal;
		display: inline-block;
		margin: 0 .5rem;
		color: #a5a5a5;
		font-size: 0.75rem;

		span {
			background: #feffd5;
			padding: 3px;
			border-radius: 2px;
		}

		svg {
			margin: 0 0.3rem;
		}
	}

	.poemkit-cascading-dropdown-list__trigger {
		position: relative;
		z-index: 0;
	}

	.poemkit-cascading-dropdown-list__items {
		@include outer-shadow( 'regular' );
		position: absolute;
		top: auto;
		left: auto;
		max-height: 350px;
		border: 1px solid rgba($primary-text-color, .1);
		background: #fff;
		border-radius: 3px;
		padding: 10px;
		overflow-y: auto;
		box-sizing: border-box;
		z-index: 1;
		top: calc(100% + 10px);
		border-radius: 8px;

		/* each item */
		ul {
			transition: .2s ease-out;

			> li {
				position: relative;
				cursor: pointer;
				float: left;
				padding: 0 10px;
				margin-right: 15px;
				border-right: 1px dotted #eee;

			}

			> li:last-child {
				margin-right: 0;
				border-right: none;
			}
		}

	}


	.poemkit-cascading-dropdown-list__opt {
		padding: 2px 10px;
		font-size: 0.875rem;
		border-radius: 3px;

		&.is-active {
			background: #f7f7f7;
		}
	}



}
